<template>
	<view class="buttonArea" >
		<scroll-view v-show="showThis" style="position: fixed;top: 0px;z-index: 99999;">
						  <image :src="urls" style="width: 80%;float: left;margin-left: 10%;margin-top: 80rpx;"></image>
		</scroll-view>
		<!-- popup -->
		<tn-popup
		  v-model="showThis"
		  :marginTop="vuex_custom_bar_height"
		  length="50%"
		  :mode="mode"
		  :backgroundColor="backgroundColor"
		  :width="width"
		  :height="height"
		  :borderRadius="borderRadius"
		  :closeBtn="closeBtn"
		  :closeBtnIcon="closeBtnIcon"
		  :closeBtnPosition="closeBtnPosition"
		  :maskCloseable="maskCloseable"
		  @close="closedPopup"
		>
		  <view class="popup-content" >
			  
			<view class="input-container">
				<!-- <view class="buttonItem tn-flex tn-flex-col-center" @click="canvasToImage.generateImage_Share">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
					  <view class="tn-icon-menu-alone-fill"></view>
					</view>
					<view class="buttonTxt">分享给朋友</view>
				</view>
				<view class="buttonItem tn-flex tn-flex-col-center" @click="canvasToImage.generateImage">
					<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
					  <view class="tn-icon-menu-alone-fill"></view>
					</view>
					<view class="buttonTxt">保存到相册</view>
				</view> -->
				<tn-scroll-list :indicator="false">
				  <view class="tn-flex tn-margin-sm">
				    <block >
				      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="canvasToImage.generateImage">
				        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				          <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-13" >
				            <view class="tn-icon-phone-fill"></view>
				          </view>  
				          <view class="tn-color-black tn-text-lg tn-text-center">
				            <text class="tn-text-ellipsis">保存</text>
				          </view>
				        </view>
				      </view>
				    </block>
					<block  >
					  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" ref="canvasToImage" @click="canvasToImage.generateImage_Share">
					    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					      <view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-9" >
					        <view class="tn-icon-wechat-fill"></view>
					      </view>  
					      <view class="tn-color-black tn-text-lg tn-text-center">
					        <text class="tn-text-ellipsis">微信</text>
					      </view>
					    </view>
					  </view>
					</block>
					
				  </view>
				</tn-scroll-list>
			</view>
		  </view>
		</tn-popup>
	</view>
</template>

<script>
	var _this
	export default {
		props: {
			  showThis: {
				type: Boolean,
				default: false
			  },
		},
		watch:{
				showThis: {
					handler(new__, old__) {
						// this.showThis=new__
						if(new__){
							// this.initImage()
							//this.$refs.canvasToImage.$emit('canvasToImage.generateImage_Share')
							this.canvasToImage.generateImage_Share
						}
						
					},
				},
		},
		data() {
			return {
				// 弹窗
				// show: true,
				mode: 'bottom',
				backgroundColor: '',
				width: '',
				height: '20%',
				borderRadius: 20,
				closeBtn: true,
				closeBtnIcon: 'close',
				closeBtnPosition: 'top-right',
				maskCloseable: true,
				urls:''
			}
		},
		onLoad(options) {
			var _this = this
		},
		methods: {
			showPopup() {
			  this.openPopup()
			},
			
			// 打开Popup
			openPopup() {
			  // this.show = true
			  this.$emit('update:showThis',true)
			},
			// 关闭Popup
			closedPopup() {
			  // this.show = false
			  this.$emit('update:showThis',false)
			  
			},
			// 保存图片
			getSaveImg(data) {
				uni.showLoading({
					mask: true
				})
				let base64data = data.base64data;
				
				// console.log("base64data", base64data)
				// return 
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, function() {
					console.log("加载Base64图片数据成功");
					let time = Date.now()
					let url = '_downloads/yflPic' + time + '.png';
					uni.hideLoading()
					bitmap.save(url, {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						// 保存图片到相册
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								// 图片保存成功后，将临时保存的图片删除
								plus.io.resolveLocalFileSystemURL(
									url,
									function(entry) {
										entry.getMetadata(function(metadata) {
											// console.log("fileCount=" + metadata.fileCount);
											entry
												.remove(); //删除单个文件 _downloads/改文件名
			 
										});
									},
									function(error) {
										// uni.showToast({ title: "下载文件" });
										console.log("error" + error);
									}
								);
								bitmap.clear()
							}
						});
						bitmap.clear();
					}, function(e) {
						onsole.log('保存图片失败：' + JSON.stringify(e));
						bitmap.clear();
					});
				}, function() {
					console.log('加载Base64图片数据失败：' + JSON.stringify(e));
					bitmap.clear();
				});
			},
			 
			// 分享图片
			getSaveImg_Share(data) {
				uni.showLoading({
					mask: true
				})
				let base64data = data.base64data;
				this.urls = base64data
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, function() {
					console.log("加载Base64图片数据成功");
					let time = Date.now()
					let url = '_downloads/yflPic' + time + '.png';
					// _this.urls = url;
					uni.hideLoading()
					bitmap.save(url, {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						// 转发图片到微信
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 2,
							imageUrl: url,
							success: function(res) {
								console.log("success:" + JSON
									.stringify(res));
								bitmap.clear();
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(
									err));
							}
						});
			 
					}, function(e) {
						onsole.log('保存图片失败：' + JSON.stringify(e));
						bitmap.clear();
					});
				}, function() {
					console.log('加载Base64图片数据失败：' + JSON.stringify(e));
					bitmap.clear();
				});
			},
			
			
		}
	}
</script>

<script module="canvasToImage" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			// 获取设备的Dpr值
			getDpr() {
				if (window.devicePixelRatio && window.devicePixelRatio > 1) {
					return window.devicePixelRatio;
				}
				return 1;
			},
			/**
			 * 将传入值转为整数
			 * @param value
			 * @returns {number}
			 */
			parseValue(value) {
				return parseInt(value, 10);
			},
 
            // 截图后保存到本地
			generateImage(event, ownerInstance) {
				// 获取想要转换的dom节点
				var dom = document.getElementById('container');
				html2canvas(dom, {
					// allowTaint: false,
					width: dom.clientWidth,
					height: dom.clientHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true
				}).then(function(canv) {
					// 将canvas转换成图片渲染到页面上
					let url = canv.toDataURL('image/jpg'); // base64数据
					ownerInstance.callMethod('getSaveImg', {
						base64data: url
					})
				});
			},
 
            // 截图后分享给好友
			generateImage_Share(event, ownerInstance) {
				// 获取想要转换的dom节点
				var dom = document.getElementById('container');
				html2canvas(dom, {
					// allowTaint: false,
					width: window.clientWidth,
					height: window.clientHeight,
					useCORS: true,
					dpi: 350
				}).then(function(canv) {
					// 将canvas转换成图片渲染到页面上
					let url = canv.toDataURL('image/jpg'); // base64数据
					ownerInstance.callMethod('getSaveImg_Share', {
						base64data: url,
					})
				});
			},
			
			initImage(){
				generateImage_Share(event, this);
			}
		}
	}
</script>
<style lang="scss" scoped>
	
	.components-scroll-list {
	  min-height: 100vh;
	}
	
	.icon3 {
	  &__item {
	    width: 30%;
	    background-color: #FFFFFF;
	    border-radius: 10rpx;
	    padding: 30rpx;
	    margin: 20rpx 10rpx;
	    margin-top: 0;
	    transform: scale(1);
	    transition: transform 0.3s linear;
	    transform-origin: center center;
	    
	    &--icon {
	      width: 80rpx;
	      height: 80rpx;
	      font-size: 40rpx;
	      border-radius: 50%;
	      margin-bottom: 18rpx;
	      position: relative;
	      z-index: 1;
	      
	      &::after {
	        content: " ";
	        position: absolute;
	        z-index: -1;
	        width: 100%;
	        height: 100%;
	        left: 0;
	        bottom: 0;
	        border-radius: inherit;
	        opacity: 1;
	        transform: scale(1, 1);
	        background-size: 100% 100%;
	        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
	      }
	    }
	  }
	}
</style>
